// 交互反馈指令
// 使用方法: v-feedback="'click'" 或 v-feedback="{ type: 'click', vibrate: true, sound: false }"

export const feedbackDirective = {
  mounted(el, binding) {
    const handleInteraction = (event) => {
      // 获取配置
      const config = typeof binding.value === 'string' 
        ? { type: binding.value, vibrate: true, sound: false }
        : { type: 'click', vibrate: true, sound: false, ...binding.value }
      
      // 触发触觉反馈
      if (config.vibrate && 'vibrate' in navigator) {
        const patterns = {
          light: 10,
          medium: 20,
          heavy: 30,
          click: 15
        }
        navigator.vibrate(patterns[config.type] || patterns.click)
      }
      
      // 添加视觉反馈
      el.style.transform = 'scale(0.98)'
      setTimeout(() => {
        el.style.transform = ''
      }, 100)
    }
    
    // 监听点击和触摸事件
    el.addEventListener('click', handleInteraction)
    el.addEventListener('touchstart', handleInteraction, { passive: true })
    
    // 保存处理器以便清理
    el._feedbackHandler = handleInteraction
  },
  
  unmounted(el) {
    if (el._feedbackHandler) {
      el.removeEventListener('click', el._feedbackHandler)
      el.removeEventListener('touchstart', el._feedbackHandler)
    }
  }
}


